<template>
  <div class="page-tab">
    <div class="chart-box2 overx-auto">
      <div
        class="tab-item"
        v-for="item of tabList"
        :key="item.key"
        :class="{ active: active == item.key }"
        @click="handleTabChange(item)"
      >
        {{ item.title }}
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "PageTab",
  props: {
    tabList: {
      type: Array,
      default: () => [],
    },
    active: {
      type: String,
      default: "",
    },
  },
  setup(props, { emit }) {
    const handleTabChange = (current) => {
      emit("change", {
        key: current.key,
      });
    };
    return {
      handleTabChange,
    };
  },
});
</script>

<style lang="less" scoped>
@import "../../styles/common.less";
@pageTabHeight: 70px;
.page-tab {
  width: 100%;
  height: @pageTabHeight;
  padding-bottom: 10px;
  .chart-box2 {
    display: flex;
    align-items: center;
    flex-direction: row;
    padding: 0 1rem;
  }
  .tab-item {
    padding: 0 1rem;
    margin-right: 4rem;
    height: @pageTabHeight - 10px;
    line-height: @pageTabHeight - 10px;
    cursor: pointer;
    white-space: nowrap;
  }
  .active {
    color: rgba(255, 255, 255, 1);
    position: relative;
    &::before {
      position: absolute;
      content: "";
      left: 1.2rem;
      right: 1.2rem;
      bottom: 8px;
      height: 3px;
      background: @primaryColor;
      background: linear-gradient(
        to right,
        rgba(24, 144, 255, 0.4),
        rgba(24, 144, 255, 1)
      );
      border-radius: 4px;
    }
  }
}
</style>
